<template>
  <div class="model-container">
    <div class="listName">订单管理</div>
    <!--搜索-->
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>快捷搜索</span>
        <div class="btns-wrapper-right">
          <el-button v-if="!searchShow" icon="el-icon-arrow-down" @click="searchShow = true"/>
          <el-button v-else icon="el-icon-arrow-up" @click="searchShow = false"/>
        </div>
      </div>
      <el-collapse-transition>
        <div v-show="searchShow" class="cardbody">
          <el-form ref="seacherParam" :model="seacherParam">
            <el-row :gutter="10">
              <el-col :xl="5" :lg="6" :md="6" :sm="8" >
                <el-col :xl="7" :lg="7" :md="8" :sm="8" class="input-name">订单编号</el-col>
                <el-col :xl="17" :lg="17" :md="16" :sm="16">
                  <el-form-item prop="orderNo">
                    <el-input v-model="seacherParam.orderNo" size="small" placeholder="请输入订单编号"/>
                  </el-form-item>
                </el-col>
              </el-col>
              <el-col :xl="5" :lg="6" :md="6" :sm="8" >
                <el-col :xl="7" :lg="7" :md="8" :sm="8" class="input-name">收货人</el-col>
                <el-col :xl="17" :lg="17" :md="16" :sm="16">
                  <el-form-item prop="contactPerson">
                    <el-input v-model="seacherParam.contactPerson" size="small" placeholder="请输入收货人"/>
                  </el-form-item>
                </el-col>
              </el-col>
              <el-col v-if="getUser().sellerId === null" :xl="5" :lg="6" :md="6" :sm="8">
                <el-col :xl="7" :lg="7" :md="8" :sm="8" class="input-name">商家</el-col>
                <el-col :xl="17" :lg="17" :md="16" :sm="16">
                  <el-form-item prop="sellerId">
                    <el-select v-model="seacherParam.sellerId" size="small" placeholder="请选择" >
                      <el-option v-for="(item,index) in sellerList" :key="index" :label="item.sellerName" :value="item.sellerId" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-row>
            <div class="cardfooter">
              <el-button type="primary" size="mini" plain @click="seachFun">查询</el-button>
              <el-button type="warning" size="mini" plain @click="resetFun">重置</el-button>
            </div>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left">
          <!--<el-button type="primary" plain @click="del">批量完成</el-button>-->
        </div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :data="dataOption" stripe border empty-text="暂无数据">

          <!--<el-table-column align="center" type="selection" width="55"/>-->

          <el-table-column align="center" prop="orderNo" label="订单编号"/>

          <el-table-column align="center" prop="createTime" label="下单时间"/>

          <el-table-column align="center" prop="member.nickName" label="买家账号"/>

          <el-table-column align="center" prop="contactPerson" label="收货人"/>

          <!--<el-table-column align="center" label="支付状态">-->
          <!--<template slot-scope="scope">{{ payStatusVal(scope.row.payStatus) }}</template>-->
          <!--</el-table-column>-->

          <el-table-column align="center" label="发货状态">
            <template slot-scope="scope">{{ deliveryStatusVal(scope.row.deliveryStatus) }}</template>
          </el-table-column>

          <el-table-column align="center" prop="sysSellerName" label="卖家店名"/>

          <el-table-column align="center" prop="realPayableAmount" label="订单金额(元)	"/>

          <el-table-column align="center" prop="realPayableAmount" label="支付金额(元)"/>

          <!--<el-table-column align="center" prop="totalDiscount" label="优惠金额(元)"/>-->

          <el-table-column align="center" label="订单状态">
            <template slot-scope="scope">{{ orderStatusVal(scope.row.orderStatus) }}</template>
          </el-table-column>

          <!--<el-table-column align="center" label="结算状态">-->
          <!--<template slot-scope="scope">{{ settledStatusVal(scope.row.settledStatus) }}</template>-->
          <!--</el-table-column>-->

          <!--<el-table-column align="center" prop="settledConfirmTime" label="结算确认时间"/>-->

          <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="scope">

              <el-button title="查看" type="primary" circle class="table-icon " @click="check(scope.row)"><i class="iconfont icon-chakan2"/></el-button>

              <el-button v-if="scope.row.orderStatus !== 3&&scope.row.deliveryStatus !== 3 && scope.row.deliveryStatus !== 4 && scope.row.deliveryStatus !== 5 " title="编辑" type="primary" circle icon="el-icon-edit" class="table-icon" @click="edit(scope.row)"/>

              <el-button v-if="scope.row.orderStatus === 2" title="确认发货" type="primary" circle class="table-icon" @click="delivery(scope.row)"><i class="iconfont icon-feiji"/></el-button>

            </template>
          </el-table-column>

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <!--弹框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      :before-close="handleClose"
      top="5vh"
      width="30%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon class="demo-ruleForm">
        <div class="formBody">
          <el-form-item label="物流公司" prop="logisticsCompId">
            <el-select ref="dataNum" v-model="dialogBindData.logisticsCompId" placeholder="请选择物流公司" size="small" filterable @change="selectFun">
              <el-option v-for="(item,index) in logisticsList" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>

          <el-form-item label="物流单号" prop="waybillNo">
            <el-input v-model="dialogBindData.waybillNo" size="small" type="text" placeholder="请输入物流单号"/>
          </el-form-item>
        </div>
        <div class="btns-wrapper">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button :loading="buttonState" type="primary" size="small" @click="submmitFun">保 存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as commodity from '../../api/commodity'
import * as order from '../../api/order'
import { getUserInformation } from '@/utils/auth'
export default {
  data() {
    return {
      // 页面搜索
      seacherParam: {
        orderNo: '',
        contactPerson: '',
        sellerId: ''
      },
      sellerList: null,
      searchShow: false,
      pageNo: 1,
      pageSize: 10,
      rowCount: null, // 总条数
      searchStatus: false,
      // 弹框
      dialogType: 1, // 1--增加  2--编辑  3--查看
      dialogState: false,
      // 按钮状态
      buttonState: false,
      // 列表数据
      dataOption: null,
      // 物流公司
      logisticsList: null,
      logisticsValue: '',
      // 提交内容
      dialogBindData: {
        orderId: null,
        waybillNo: '',
        logisticsCompId: ''
      },
      rules: {
        logisticsCompId: [
          { required: true, message: '请选择物流公司', trigger: 'blur' }
        ],
        waybillNo: [
          { required: true, message: '请输入物流单号', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    dialogTitle() {
      if (this.dialogType === 1) {
        return '确认发货'
      }
    }
  },
  beforeMount() {
    const searchType = this.$route.params.search // 类型
    if (searchType) {
      this.seacherParam = JSON.parse(sessionStorage.getItem('orderList_searchData'))
      this.searchShow = true
      this.seachFun()
    } else {
      sessionStorage.removeItem('orderList_searchData')
      this.getList()
    }
    this.sellerListFun()
  },
 /* mounted() {
    this.getSchoolWebModuleMessageListFunc();
  },
  //离开页面时候，清除
  destroyed(){
    sessionStorage.removeItem("orderList_flag");
  },*/
  methods: {
    /*getSchoolWebModuleMessageListFunc(){　　　//当从详情页返回的时候，先获取详情页中存下来的标识，在列表页中，把获取到的分页页码重新赋值赋值，用以返回前的页面，保持不变
      if(sessionStorage.getItem('orderList_flag')){
        //如果有这个就读取缓存里面的数据
        this.pageNo=Number(sessionStorage.getItem("orderList_currentPage"));
      }else{
        this.pageNo=1;
        //这个主要是从其他页面第一次进入列表页，清掉缓存里面的数据
        sessionStorage.removeItem("orderList_currentPage");
      }
      this.getList()
    },*/
    // 获取用户信息
    getUser() {
      return JSON.parse(getUserInformation())
    },
    seachFun() {
      if (this.getUser().sellerId !== null) {
        if (!this.searchStatus) {
          this.pageNo = 1
        }
        const param = {
          current: this.pageNo,
          size: this.pageSize,
          sellerId: this.getUser().sellerId
        }
        const arr = []
        for (const key in this.seacherParam) {
          if (this.seacherParam[key] !== '') {
            arr.push('&' + key + '=' + this.seacherParam[key])
          }
        }
        const url = arr.join('')
        order.searchSellerOrderListVoSeller(param, url).then(res => {
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始话表格数据
          this.dataOption = res.data.data.records
          // 初始化分页数据
          this.pageSize = res.data.data.size
          this.rowCount = res.data.data.total
          this.searchStatus = false
        })
      } else {
        if (!this.searchStatus) {
          this.pageNo = 1
        }
        const param = {
          current: this.pageNo,
          size: this.pageSize
        }
        const arr = []
        for (const key in this.seacherParam) {
          if (this.seacherParam[key] !== '') {
            arr.push('&' + key + '=' + this.seacherParam[key])
          }
        }
        const url = arr.join('')
        order.searchSellerOrderListVo(param, url).then(res => {
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始话表格数据
          this.dataOption = res.data.data.records
          // 初始化分页数据
          this.pageSize = res.data.data.size
          this.rowCount = res.data.data.total
          this.searchStatus = false
        })
      }
    },
    getList() {
      const param = {
        current: this.pageNo,
        size: this.pageSize
      }
      if (this.getUser().sellerId !== null) {
        param.sellerId = this.getUser().sellerId
        order.getOrderList(param).then(res => {
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始话表格数据
          this.dataOption = res.data.data.records
          // 初始化分页数据
          this.pageSize = res.data.data.size
          this.rowCount = res.data.data.total
        })
      } else {
        order.getSellerOrderListVo(param).then(res => {
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始话表格数据
          this.dataOption = res.data.data.records
          // 初始化分页数据
          this.pageSize = res.data.data.size
          this.rowCount = res.data.data.total
        })
      }
    },
    sellerListFun() {
      const param = {
        current: 1,
        size: 9999
      }
      commodity.getMerchantsListAll(param).then(res => {
        if (res.data.code === 1) {
          this.sellerList = res.data.data.records // 搜索用到
        }
      })
    },

    // 确认发货
    delivery(data) {
      this.dialogType = 1
      this.dialogState = true
      this.dialogBindData.orderId = data.orderId
      this.getCompanyList()
    },
    getCompanyList() {
      order.getLogisticCompanyList().then(res => {
        if (res.data.code === 1) {
          this.logisticsList = res.data.data
        }
      })
    },
    selectFun(val) {
      const that = this
      this.logisticsList.find(item => {
        if (item.id === val) {
          that.logisticsValue = item.name
        }
      })
    },
    // 编辑
    edit(data) {
      this.$router.push({
        name: '/v1/editor_order',
        params: {
          order: data
        }
      })
      sessionStorage.setItem('orderList_searchData', JSON.stringify(this.seacherParam))
    },
    // 提交
    submmitFun() {
      const param = {
        orderId: this.dialogBindData.orderId,
        waybillNo: this.dialogBindData.waybillNo,
        logisticsCompId: this.dialogBindData.logisticsCompId,
        logisticsCompName: this.logisticsValue
      }
      this.$refs.dialogBindData.validate((valid) => {
        if (valid) {
          if (this.dialogType === 1) {
            order.confirmOrderList(param).then(res => {
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }
              this.$message({
                message: '确认发货成功',
                type: 'success'
              })
              this.buttonState = false
              this.getList()
              this.handleClose()
            })
          }
        } else {
          return false
        }
      })
    },
    check(data) {
      this.$router.push({
        name: '/v1/order_details',
        params: {
          order: data
        }
      })
      sessionStorage.setItem('orderList_searchData', JSON.stringify(this.seacherParam))
    },
    // 删除
    del(data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 重置
    resetFun() {
      this.$refs.seacherParam.resetFields()
      this.pageNo = 1
      this.pageSize = 10
      sessionStorage.removeItem('orderList_searchData')
      for (const key in this.seacherParam) {
        this.seacherParam[key] = ''
      }
      this.getList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      if (this.seacherParam.orderNo !== '' ||
        this.seacherParam.sellerId !== '' ||
        this.seacherParam.contactPerson !== '') {
        this.searchStatus = true
        this.seachFun()
      } else {
        this.getList()
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      sessionStorage.setItem('orderList_currentPage', JSON.stringify(this.pageNo))
      if (this.seacherParam.orderNo !== '' ||
        this.seacherParam.sellerId !== '' ||
        this.seacherParam.contactPerson !== '') {
        this.searchStatus = true
        this.seachFun()
      } else {
        this.getList()
      }
    },
    handleClose() {
      for (const key in this.dialogBindData) {
        this.dialogBindData[key] = ''
      }
      this.dialogState = false
      this.$refs.dialogBindData.clearValidate()
    },
    // 支付状态
    payStatusVal(type) {
      if (type === 0) {
        return '未支付'
      } else if (type === 1) {
        return '已支付'
      } else if (type === 2) {
        return '部分支付'
      }
    },
    // 发货状态
    deliveryStatusVal(type) {
      if (type === 0) {
        return '待备货'
      } else if (type === 1) {
        return '备货中'
      } else if (type === 2) {
        return '已出库'
      } else if (type === 3) {
        return '已发货'
      }
    },
    // 订单状态
    orderStatusVal(type) {
      if (type === 0) {
        return '新提交'
      } else if (type === 1) {
        return '待支付'
      } else if (type === 2) {
        return '待发货'
      } else if (type === 3) {
        return '待收货'
      } else if (type === 4) {
        return '已收货'
      } else if (type === 5) {
        return '已完成'
      }
    },
    // 结算状态
    settledStatusVal(type) {
      if (type === 0) {
        return '未结算'
      } else if (type === 1) {
        return '已结算'
      }
    }
  }
}
</script>
<style type="text/scss" lang="scss" scoped>

</style>
